<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<canvas class='canvas' width="600" height="600"></canvas>
		<script>
			var canvas = document.querySelector('.canvas')
			var c1 = canvas.getContext('2d')
			canvas.style.border = '1px solid black'
			
			// 中心点/半径/起始位置/弧度，false顺时针，true逆时针
			// c1.moveTo(300,300)
			// c1.arc(300,300,100,0,30 * Math.PI / 180,true)// 绘制一条30°的弧
			// c1.arc(300,300,100,- Math.PI / 2,0,false)// 绘制一条90°的弧
			// c1.fill()
			
			var data = [
				{
					value: .2,
					color: 'red',
					title: '应届生'
				},
				{
					value: .3,
					color: 'blue',
					title: '社会招生'
				},
				{
					value: .4,
					color: 'green',
					title: '老学员推荐'
				},
				{
					value: .1,
					color: '#ccc',
					title: '公开课'
				},
			]
			var tempAngle = -90
			var x0 = 300
			var y0 = 300
			var radius = 200
			for(var i = 0; i < data.length; i++){
				c1.beginPath()
				c1.moveTo(x0, y0)		
				// 绘制角度
				var angle = data[i].value * 360
				c1.fillStyle = data[i].color
				
				var startAngle = tempAngle * Math.PI / 180
				var endAngle = (tempAngle + angle) * Math.PI / 180
				
				c1.arc(x0, y0, radius, startAngle, endAngle)
				
				// 绘制文字
				var txt = data[i].value * 100 + '%'
				var x, y;
				var txtAngle = tempAngle + 1/2 * angle
				x = x0 + Math.cos(txtAngle * Math.PI / 180) * (radius + 20)
				y = y0 + Math.sin(txtAngle * Math.PI / 180) * (radius + 20)
				if(txtAngle > 90 && txtAngle < 270){
					c1.textAlign = 'end'
				}
				c1.font = '16px 微软雅黑'
				c1.fillText(txt, x, y)
				
				c1.fill()
				tempAngle += angle
			}
		</script>
	</body>
</html>
